<template>
  <div>
    <el-card class="box-card">
      <!-- head -->
      <div slot="header" class="clearfix">
        <el-tabs v-model="activeName">
          <el-tab-pane label="销售额" name="first"></el-tab-pane>
          <el-tab-pane label="访问量" name="second"></el-tab-pane>
        </el-tabs>
        <div class="right">
          <span @click="setDay">今日</span>
          <span @click="setWeek">本周</span>
          <span @click="setMonth">本月</span>
          <span @click="setYear">本年</span>
          <el-date-picker
            v-model="date"
            class="date"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
      </div>
      <!-- body -->
      <div class="text item">
        <el-row :gutter="20">
          <!-- left -->
          <el-col :span="16">
            <div class="chart" ref="chart"></div>
          </el-col>
          <!-- right -->
          <el-col :span="8" class="right">
            <h3>门店{{ title }}排名</h3>
            <ul>
              <li>
                <span class="rindex">1</span>
                <span>肯德基</span>
                <span>232，123</span>
              </li>
              <li>
                <span class="rindex">2</span>
                <span>麦当劳</span>
                <span>232，123</span>
              </li>
              <li>
                <span class="rindex">3</span>
                <span>大米先生</span>
                <span>124，255</span>
              </li>
              <li>
                <span>4</span>
                <span>贝尔买书</span>
                <span>145，245</span>
              </li>
              <li>
                <span>5</span>
                <span>肯德基</span>
                <span>567，433</span>
              </li>
              <li>
                <span>6</span>
                <span>新世界的</span>
                <span>244，533</span>
              </li>
              <li>
                <span>7</span>
                <span>山脚下九二</span>
                <span>144，235</span>
              </li>
            </ul>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import dayjs from "dayjs";
import { mapState } from "vuex";
export default {
  name: "sale",
  data() {
    return {
      activeName: "first",
      echartbar: "",
      date: [],
    };
  },
  mounted() {
    this.echartbar = echarts.init(this.$refs.chart);
    this.echartbar.setOption({
      title: {
        text: this.title + "趋势",
      },
      xAxis: {
        type: "category",
        data: this.listState.orderFullYearAxis || [],
        // '一月', '二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月'
      },
      yAxis: {
        type: "value",
      },
      tooltip: {},
      series: [
        {
          data: this.listState.orderFullYear || [],
          // 120, 200, 150, 80, 70, 110, 140,120, 230, 90, 88, 70
          type: "bar",
        },
      ],
    });
  },
  computed: {
    title() {
      this.$nextTick(() => {
        this.echartbar.setOption({
          title: {
            text: this.title + "趋势",
          },
          xAxis: {
            type: "category",
            data:
              this.title == "销售额"
                ? this.listState.orderFullYearAxis
                : this.listState.userFullYearAxis,
          },
          yAxis: {
            type: "value",
          },
          tooltip: {},
          series: [
            {
              data:
                this.title == "销售额"
                  ? this.listState.orderFullYear
                  : this.listState.userFullYear,
              type: "bar",
            },
          ],
        });
      });
      return this.activeName == "first" ? "销售额" : "访问量";
    },

    ...mapState({
      listState: (state) => state.home.list,
    }),
  },
  methods: {
    setDay() {
      const day = dayjs().format("YYYY-MM-DD");
      this.date = [day, day];
    },
    setWeek() {
      let start = dayjs().day(1).format("YYYY-MM-DD");
      let end = dayjs().day(7).format("YYYY-MM-DD");
      this.date = [start, end];
    },
    setMonth() {
      let start = dayjs().startOf("month").format("YYYY-MM-DD");
      let end = dayjs().endOf("month").format("YYYY-MM-DD");
      this.date = [start, end];
    },
    setYear() {
      let start = dayjs().startOf("year").format("YYYY-MM-DD");
      let end = dayjs().endOf("year").format("YYYY-MM-DD");
      this.date = [start, end];
    },
  },
};
</script>

<style>
/* .el-card__body{
    padding: 0px;
} */
.box-card {
  margin-top: 10px;
}

.box-card .clearfix {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.el-tabs__item {
  font-size: 20px;
}

.clearfix div span {
  display: inline-block;
  margin: 10px 8px 0px 8px;
  font-size: 16px;
}

.right {
  position: absolute;
  right: 0px;
}
.date {
  width: 200px;
  margin: 0px 10px;
}

.chart {
  height: 300px;
  width: 100%;
}

ul {
  list-style: none;
  width: 100%;
  height: 300px;
  padding: 0px;
}

ul li {
  height: 8%;
  margin: 10px 0px;
}

ul li span:nth-child(1) {
  float: left;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
}

ul li .rindex {
  background: black;
  color: white;
}

ul li span:nth-child(3) {
  float: right;
}

.right span {
  margin: 0px 10px;
}

.nest-menu .el-menu-item {
  margin: 0px;
}
</style>
